<script setup lang="ts">
import SvgIcon from '@/components/SvgIcon/index.vue'
import { NTooltip } from 'naive-ui'
import { CREATE_DIALOG } from '../utils/constant'
const props = defineProps<{
  showHistory: boolean
}>()
const emit = defineEmits(['createDialog', 'toggleHistory'])
const createDialog = () => {
  emit('createDialog')
}

const toggleHistory = () => {
  emit('toggleHistory')
}
</script>

<template>
  <div class="deepseek-chat-history px-2 py-6 overflow-y-auto">
    <div v-if="!props.showHistory" class="text-center">
      <SvgIcon
        @click="toggleHistory"
        name="fold-outlined"
        class="text-[#CAD6E8] text-[32px] cursor-pointer hover:text-[#38F2F4]"
      />
      <n-tooltip placement="right">
        <template #trigger>
          <SvgIcon
            @click="createDialog"
            name="edit-outlined"
            class="text-[#CAD6E8] text-[24px] cursor-pointer hover:text-[#38F2F4]"
          />
        </template>
        <span>{{ CREATE_DIALOG }}</span>
      </n-tooltip>
    </div>
    <div v-else>
      <div class="ml-1">
        <SvgIcon
          @click="toggleHistory"
          name="fold-outlined"
          class="text-[#CAD6E8] text-[32px] cursor-pointer hover:text-[#38F2F4]"
        />
      </div>
      <div
        class="my-4 cursor-pointer px-2 h-8 leading-8 bg-[#38F2F405] rounded :hover:bg-[#38F2F415] w-[122px]"
        @click="createDialog"
      >
        <SvgIcon name="edit-outlined" class="text-[#38F2F4] text-[24px]" />
        <span class="text-[#38F2F4] ml-2">{{ CREATE_DIALOG }}</span>
      </div>
    </div>
  </div>
</template>
